<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import axios from 'axios'

onMounted(()=>{
  var myChart = echarts.init(document.getElementById('charts'));
  
  axios({
    method:'get',
    url: '/api/get_vue_chart_data'
  }).then((res)=>{
    console.log(res)
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: res.data,
          type: 'bar'
        }
      ]
    })
  });
  
  
  
  
})


</script>
<template>
  <h1>This is an Chart page !!!!</h1>
  <div id="charts" style="width:600px; height: 480px;">
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
